<template>
    <div id="">
        <button v-on:click="add">添加</button>
        <button @click="remove">删除</button>
        <div class="waper">
            <!-- duration设置动画时间，其他两个分别控制进入和离开的动画 -->
            <transition-group :duration="1000" enter-active-class="animate__animated animate__lightSpeedInRight"
                leave-active-class="animate__animated animate__fadeOutDownBig">
                <div v-for="(item, index) in list" :key="index">{{ item }}</div>
            </transition-group>
        </div>
    </div>
</template>

 <script setup lang="ts">
import { reactive } from 'vue'
// 安裝引入动画库 npm install animate.css
import 'animate.css'

const list = reactive<number[]>([1, 2, 3, 4])

const add = () => {
    let num = list[list.length - 1] + 1
    if (list.length == 0) {
        num = 1
    }
    list.push(num)
}
const remove = () => {
    list.pop()
}

</script>

<style lang="less" scoped>
.waper {
    width: 150px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid;

    div {
        margin: 10px 5px;
        font-size: 20px;
    }
}
</style>